<h3>描述</h3>
<p>
  表格整体编辑场景示例
  <br />
</p>
<br />
<h3>示例</h3>
<div>
  <button type="button" tiButton (click)="addRow()">添加行</button>
</div>
<br />
<ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
  <table>
    <thead>
      <tr>
        <th tiOverflow *ngFor="let column of columns" width="{{column.width}}">{{column.title}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of displayed;trackBy: trackByFn" [formGroup]="row.formgroupCtrl">
        <td>{{row.sourceName}}</td>
        <td>
          <ti-select style="width: 100px" [options]="levelOptions" formControlName="level" placeholder="请选择等级" [valueKey]="'label'">
          </ti-select>
        </td>
        <td>
          <input style="width: 80px" type="text " tiText tiValidation formControlName="balance" />
        </td>
        <td>
          <input style="width: 80px" type="text " tiText tiValidation formControlName="unsubscribe" />
        </td>
        <td>
          <ti-date style="width: 140px" tiValidation formControlName="createTime"></ti-date>
        </td>
        <td>
          <input style="width: 80px" type="text" tiText tiValidation formControlName="operator" />
        </td>
        <td>
          <ti-actionmenu [items]="items" (select)="onSelect($event, row)"></ti-actionmenu>
        </td>
      </tr>
    </tbody>
  </table>
</ti-table>
<br />
<!-- 整体校验提示区 -->
<!-- 使用响应式表单，可以很容易的知道每个表单的校验状态，做成对应的处理 -->
<!-- 本测试用例atLeastOneValidator 校验最少有一行输入完整，才能提交 -->
<!-- 其他校验，可以根据需要定义 -->
<p *ngIf="allFormControl.errors && allFormControl.errors.message" class="demo-error-container">{{allFormControl.errors.message}}</p>

<div>
  <button tiButton [disabled]="allFormControl.errors && allFormControl.errors.message" (click)="onClickSubmit()">提交</button>
</div>

<style>
  .demo-error-container {
    color: red;
  }
</style>
